<template>
  <a-card :body-style="{padding: '24px 32px'}" :bordered="false">
    <div class="ant-pro-icon-selector">
      <a-tabs v-model="currentTab" @change="handleTabChange">
        <a-tab-pane tab="新词管理" key="newWord">
          <div class="table-page-search-wrapper">
            <a-form layout="inline">
              <a-row :gutter="48">
                <a-col :md="8" :sm="15">
                  <a-form-item label="检索词">
                    <a-input placeholder="请输入检索词" v-model="queryParam.newWord"/>
                  </a-form-item>
                </a-col>
                <a-col :md="6" :sm="24">
                  <span class="table-page-search-submitButtons">
                    <a-button type="primary" @click="$refs.table1.refresh(true)">查询</a-button>
                  </span>
                </a-col>
              </a-row>
            </a-form>
          </div>
          <div class="table-operator">
            <a-button type="primary" icon="plus" @click="$refs.newWordModal.add()" v-priv="'ElasticSearch.SearchWordManager.NewWordAdd'">新建</a-button>
            <a-button type="danger" :disabled="this.selectedRowKeys1.length == 0" @click="newWorddeleteHandler()" v-priv="'ElasticSearch.SearchWordManager.NewWordDel'">删除</a-button>
          </div>
          <s-table
            size="default"
            ref="table1"
            rowKey="id"
            :rowSelection="{selectedRowKeys: selectedRowKeys1, onChange: onSelectChange1}"
            :columns="newWordColumns"
            :data="loadDataNewWord"
          >
            <span slot="action" slot-scope="text, record">
              <a v-if="newWordEditEnabel" @click="newWordHandleEdit(record)">编辑</a>
            </span>
          </s-table>
        </a-tab-pane>
        <a-tab-pane tab="停用词管理" key="stopWord">
          <div class="table-page-search-wrapper">
            <a-form layout="inline">
              <a-row :gutter="48">
                <a-col :md="8" :sm="15">
                  <a-form-item label="检索词">
                    <a-input placeholder="请输入检索词" v-model="queryParam.stopWord"/>
                  </a-form-item>
                </a-col>
                <a-col :md="6" :sm="24">
                  <span class="table-page-search-submitButtons">
                    <a-button type="primary" @click="$refs.table2.refresh(true)">查询</a-button>
                  </span>
                </a-col>
              </a-row>
            </a-form>
          </div>
          <div class="table-operator">
            <a-button type="primary" icon="plus" @click="$refs.stopWordModal.add()" v-priv="'ElasticSearch.SearchWordManager.StopWordAdd'">新建</a-button>
            <a-button type="danger" :disabled="this.selectedRowKeys2.length == 0" @click="stopWorddeleteHandler()" v-priv="'ElasticSearch.SearchWordManager.StopWordDel'">删除</a-button>
          </div>
          <s-table
            size="default"
            ref="table2"
            rowKey="id"
            :rowSelection="{selectedRowKeys: selectedRowKeys2, onChange: onSelectChange2}"
            :columns="stopWordColumns"
            :data="loadDataStopWord"
          >
            <span slot="action" slot-scope="text, record">
              <a v-if="stopWordEditEnabel" @click="stopWordHandleEdit(record)">编辑</a>
            </span>
          </s-table>
        </a-tab-pane>
      </a-tabs>
    </div>
    <new-word-modal ref="newWordModal" @ok="newWordhandleOk"/>
    <stop-word-modal ref="stopWordModal" @ok="stopWordhandleOk"/>
  </a-card>
</template>

<script>
import { STable } from '@/components'
import NewWordModal from '@/views/system/components/NewWordModal'
import StopWordModal from '@/views/system/components/StopWordModal'
import { newWordList, newWordDel, stopWordList, stopWordDel } from '@/api/system'
export default {
  name: 'WordManager',
  components: {
    STable,
    NewWordModal,
    StopWordModal
  },
  data () {
    return {
      currentTab: 'newWord',
            // 查询参数
      queryParam: {},
      typeOptions: [],
      selectedRowKeys1: [],
      selectedRows1: [],
      selectedRowKeys2: [],
      selectedRows2: [],
      newWordEditEnabel: this.$auth('ElasticSearch.SearchWordManager.NewWordEdit'),
      stopWordEditEnabel: this.$auth('ElasticSearch.SearchWordManager.StopWordEdit'),
      // 表头
      newWordColumns: [
        {
          title: '新词',
          dataIndex: 'rootWord'
        },
        {
          title: '创建时间',
          dataIndex: 'createTime'
        },
        {
          title: '操作',
          width: '200px',
          dataIndex: 'action',
          scopedSlots: { customRender: 'action' }
        }
      ],
      // 表头
      stopWordColumns: [
        {
          title: '新词',
          dataIndex: 'rootWord'
        },
        {
          title: '状态',
          dataIndex: 'status'
        },
        {
          title: '创建时间',
          dataIndex: 'createTime'
        },
        {
          title: '操作',
          width: '200px',
          dataIndex: 'action',
          scopedSlots: { customRender: 'action' }
        }
      ],
      // 加载数据方法 必须为 Promise 对象
      loadDataNewWord: parameter => {
        return newWordList(Object.assign(parameter, {
          word: this.queryParam.newWord ? this.queryParam.newWord.trim() : ''
        }))
      },
      // 加载数据方法 必须为 Promise 对象
      loadDataStopWord: parameter => {
        return stopWordList(Object.assign(parameter, {
          word: this.queryParam.stopWord ? this.queryParam.stopWord.trim() : ''
        }))
      }
    }
  },
  methods: {
    handleTabChange (tab) {
    },
    onSelectChange1 (selectedRowKeys, selectedRows) {
      this.selectedRowKeys1 = selectedRowKeys
      this.selectedRows1 = selectedRows
    },
    newWordhandleOk () {
      this.$refs.table1.refresh(true)
      this.selectedRowKeys1 = []
      this.selectedRows1 = []
    },
    newWordHandleEdit (record) {
      this.$refs.newWordModal.edit(record)
    },
    newWorddeleteHandler () {
      const ids = this.selectedRowKeys1.join()
      const that = this
      this.$confirm({
        title: '确认删除吗，删除后不可恢复？',
        onOk () {
          newWordDel(ids).then(res => {
            if (res.status === 1) {
              that.newWordhandleOk()
              that.$message.success(res.message)
            } else {
              that.$message.error(res.message)
            }
          })
        }
      })
    },
    onSelectChange2 (selectedRowKeys, selectedRows) {
      this.selectedRowKeys2 = selectedRowKeys
      this.selectedRows2 = selectedRows
    },
    stopWordhandleOk () {
      this.$refs.table2.refresh(true)
      this.selectedRowKeys2 = []
      this.selectedRows2 = []
    },
    stopWordHandleEdit (record) {
      this.$refs.stopWordModal.edit(record)
    },
    stopWorddeleteHandler () {
      const ids = this.selectedRowKeys2.join()
      const that = this
      this.$confirm({
        title: '确认删除吗，删除后不可恢复？',
        onOk () {
          stopWordDel(ids).then(res => {
            if (res.status === 1) {
              that.stopWordhandleOk()
              that.$message.success(res.message)
            } else {
              that.$message.error(res.message)
            }
          })
        }
      })
    }
  }
}
</script>
